// ====================1.获取学生数据,并渲染到表格=================
async function  renderStudent() {
    const { data: res } = await axios.get('/students')
    console.log(res)
    let arr = res.data.map(item => {
        return `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender===0?'男':'女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province} ${item.city} ${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
        </td>
      </tr> 
        `
    })
    document.querySelector('tbody').innerHTML=arr.join('')
}
renderStudent() 
// 添加操作，需要提前准备，比如模态框的用法、省市县联动效果
// bootstrap模态框使用方法，两个步骤: 1. 实例化  2. 调用方法显示或隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() // 让模态框显示
// addModal.hide() // 让模态框隐藏
// ===========================================
// 点击 + 按钮的时候，让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    // 修改模态框的标题
    document.querySelector('#modal h5').innerHTML = '添加学员'
    // 重置表单
document.querySelector('#form').reset()
  addModal.show()
}) 

// =================================2.省市县
// 下面的函数,完成省市县的联动效果
async function initCity() {
    const province = document.querySelector('[name=province]')
    const city = document.querySelector('[name=city]')
    const area = document.querySelector('[name=area]')
  //1.马上获取全部的省,渲染到第1个下拉框的位置
    const { data: res } = await axios.get('/api/province')
    console.log(res)
    let arr = res.data.map(item => 
        `  <option value="${item}">${item}</option>`
    )
    province.innerHTML='<option value="">--省份--</option>' + arr.join('')
  //2.切换省的时候,获取对应的市,渲染到第2个下拉框的位置
    province.addEventListener('change', async function () {
         // 省切换后，无论如何，都要重置县
        area.innerHTML=`<option value="">--城区--</option>`
        let pname = province.value
        // console.log(pname)
         // 如果没有选择省，则需要重置市
        if (pname === '') {
         return   (city.innerHTML='<option value="">--城市--</option>')
        }
        const { data: res } = await axios.get('/api/city', { params: {pname} })
        const arr=res.data.map(item=> `<option value="${item}">${item}</option>`)
        city.innerHTML='<option value="">--城市--</option>' + arr.join('')
    })
  //3.切换市的时候,获取对应的县,渲染到第3个下拉框的位置 
    city.addEventListener('change', async function () {
        let pname = province.value
        let cname = city.value
        if (cname === '') {
            return ( area.innerHTML='<option value="">--城区--</option>')
        }
        const { data: res } = await axios.get('/api/area', { params: { pname, cname } })
        console.log(res)
        const arr = res.data.map(item => `  <option value="${item}">${item}</option>`)
        area.innerHTML='<option value="">--城区--</option>' + arr.join('')
        
    })
}
initCity()

// ===============================3.确认提交
// 点击弹层中的 确认 按钮的时候
document.querySelector('#submit').addEventListener('click',async function (e) {
    e.preventDefault()
    const data = val(document.querySelector('#form'))
    //console.log(data)
    // 把数字类型的值转换一下
    data.age = Number(data.age)
    data.gender = +data.gender//+ 必须和后面的变量连在一起
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
// console.log(data)
    // 判断是添加还是修改操作
    let title = document.querySelector('#modal h5').innerHTML
    if (title === '添加学员') {
           // ajax提交
    try {
        const { data: res } = await axios.post('/students', data)
        // console.log(res)
        message.success(res.message)//使用插件提示
        renderStudent()//重新获取页面数据,重新渲染
        addModal.hide()//关闭弹层
    }catch (e) {
        // console.log(e)
        message.error('添加失败')
    }
    } else if (title === '修改学员') {
        try {
            let id = document.querySelector('#modal h5').dataset.id
            //发送请求进行修改
            const { data: res } = await axios.put(`/students/${id}`, data)
            message.success(res.message)//使用插件提示
            renderStudent()//重新获取页面数据,重新渲染
            addModal.hide()//关闭弹层
        } catch (e) {
        message.error('修改失败')
            
        }
    }
 
})

// =============================4.删除操作  |  编辑操作================
document.querySelector('tbody').addEventListener('click',async function (e) {
    e.preventDefault()//阻止默认行为
    // 判断点击的是否是删除
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        // console.log('你点击的是删除', id)
        // 目前阶段,我们应该有这样的思想,对于敏感操作,必须加提示
        if(!confirm('确定要删除吗'))return
        // message.confirm('提示', '确定删除嘛', async (res) => {
            // if (res) {
                try {
                    const { data: res } = await axios.delete(`/students/${id}`)
                    message.success('删除成功')
                    renderStudent()
                } catch (e) {
                    message.error('删除失败')
                }
        //     }
        // })
     
    }
    //判断点击的是否是编辑
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        console.log('你点击的是编辑', id)

// 修改模态框的标题
        document.querySelector('#modal h5').innerHTML = '修改学员'
        // 设置自定义属性，存储id
        document.querySelector('#modal h5').setAttribute('data-id', id)

        addModal.show()//点击编辑的时候,出现弹框
        // 要做数据回填-->首先得到数据-->根据 id发送请求获取数据
        const { data: res } = await axios.get(`/students/${id}`)
        // console.log(res)
        // 在数据回填之前,用该把市,县都取出,渲染到第2,3个下拉框中
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2=axios.get('/api/area', { params: { pname:res.data.province, cname:res.data.city } })
        // const [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2])
        // console.log(c)
        // console.log(a)
        const result = await Promise.all([p1, p2])
        // console.log(result)
        // console.log(result[0].data.data)
        let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr2.join('')
        // console.log(result[1].data.data)
        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr3.join('')

        // val(表单, 数据)//传递两个参数,表示进行数据回填
        val(document.querySelector('#form'),res.data)
    }
})